<template>
  <div class="shop_list">
    <div class="shop_img">
      <img src="../../assets/gw-tishibiao.png" v-if="goods==0">
    </div>
    <div class="shop-list">
      <div class="list-item" @click.stop v-for="(goods, index) in goods" :key="index">
        <van-checkbox v-model="goods.selected"></van-checkbox>
        <div class="goods_info">
          <img :src="goods.thumd">
          <div class="goods_text">
            <div class="title">{{goods.title}}</div>
            <div class="price">￥{{goods.price | formatPrice}}</div>
            <div class="num">
              <van-stepper v-model="goods.num"/>
            </div>
            <div class="desc">{{goods.desc}}</div>
          </div>
        </div>

        <van-submit-bar v-if="show" :price="totalprice" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="checked" @click="selectAll">全选</van-checkbox>
        </van-submit-bar>

        <van-submit-bar v-if="!show" button-text="删除" @submit="delitem(index)">
          <van-checkbox v-model="checked" @click="selectAll">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
import { SubmitBar } from "vant";
import { Toast } from "vant";
export default {
  props: {
    show: Boolean
  },
  data() {
    return {
      checkedGoods: ["1", "2", "3"],
      checked: false,
      goods: [
        {
          id: "1",
          thumd:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560743709417&di=bfa489f77c97dbec51d33a70abf1df0f&imgtype=0&src=http%3A%2F%2Fstatic.chayuqing.com%2F042591e04dde9f87ce540ebcedd69ffb.jpg",
          title: "这樱桃嘎嘎嘎的好吃这樱桃嘎嘎嘎的好吃这樱桃嘎嘎嘎的好吃哈哈哈",
          price: 100,
          desc: "12222",
          num: 1,
          selected: false
        },
        {
          id: "2",
          thumd:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560743709417&di=bfa489f77c97dbec51d33a70abf1df0f&imgtype=0&src=http%3A%2F%2Fstatic.chayuqing.com%2F042591e04dde9f87ce540ebcedd69ffb.jpg",
          title: "wahahah",
          price: 200,
          desc: "12222",
          num: 1,
          selected: false
        },
        {
          id: "3",
          thumd:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560743709417&di=bfa489f77c97dbec51d33a70abf1df0f&imgtype=0&src=http%3A%2F%2Fstatic.chayuqing.com%2F042591e04dde9f87ce540ebcedd69ffb.jpg",
          title: "wahahah",
          price: 300,
          desc: "12222",
          num: 1,
          selected: false
        }
      ]
    };
  },
  computed: {
    totalprice() {
      var total = 0;
      var selectGoods = this.goods.filter(function(val) {
        return val.selected == true;
      });
      console.log(selectGoods.length);
      for (var i = 0; i < selectGoods.length; i++) {
        console.log(selectGoods[i].price);
        total = total + selectGoods[i].price * selectGoods[i].num;
        console.log(total);
      }
      return total;
    }
  },

  methods: {
    onSubmit() {
      Toast("点击结算");
    },
    selectAll() {
      this.goods.forEach(item => {
        item.selected = !item.selected;
      });
    },
    delitem() {
      this.goods = this.goods.filter(function(val) {
        return val.selected == false;
      });
    }
  },

  filters: {
    formatPrice: function(price) {
      return (price / 100).toFixed(2);
    }
  },

  watch: {
    /*监听全选事件*/
    goods: {
      handler(value) {
        var _this = this;
        var count = 0;
        for (var i = 0; i < value.length; i++) {
          if (value[i].selected == true) {
            count++;
          }
        }
        //如果子集全部选中，全选按钮设置选中状态
        if (count == value.length) {
          _this.checked = true;
        } else {
          _this.checked = false;
        }
      },
      deep: true
    }
  }
};
</script>

<style>
.goods_info {
  padding-top: 10px;
  padding-left: 40px;
  /* padding-bottom: 20px; */
}
.goods_info .goods_text .title {
  font-size: 16px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 5px;
}
.goods_info .goods_text .num {
  float: right;
  margin-right: 10px;
  padding-top: 20px;
}

.goods_info .goods_text .price {
  color: red;
}

.goods_info .goods_text {
  padding-left: 100px;
}

.shop_list .shop_img {
  background: white;
}
.shop_list .shop_img img {
  width: 100%;
}
.shop_footer {
  position: fixed;
  bottom: 0;
}
.van-checkbox {
  padding-left: 20px;
}

.van-submit-bar {
  bottom: 50px;
}

.shop-list .list-item {
  position: relative;
  width: 100%;
  height: 100px;
  padding-bottom: 28px;
  background: white;
}
.shop-list .van-checkbox__label {
  width: 100%;
  height: 100%;
}
.shop-list .list-item img {
  height: 90px;
  width: 90px;
  float: left;
}
.card-goods__item {
  position: relative;
  margin-top: 5px;
}
.shop-list .van-checkbox__icon {
  position: absolute;
  left: 10px;
  top: 35%;
}
</style>
